<!--
 * @Description: 个人
 * @Author: tianhao
 * @Date: 2022-07-01 10:10:11
 * @LastEditors: tianhao
 * @LastEditTime: 2022-07-13 11:15:43
-->
<template>
  <div class="address">
    <van-nav-bar
      class="myNavBar"
      title="收货地址"
      left-arrow
      @click-left="goBack()"
    >
    </van-nav-bar>
    <van-address-list
      class="list"
       v-for="item in list"
      :key="item.id"
      v-model="chosenAddressId"
      :list="list"
      @add="onAdd"
      default-tag-text="默认"
      @edit="onEdit"
    />
    <!-- <van-card
      class="myCard"
      v-for="item in list"
      :key="item.id"
      :price="item.price"
      thumb="https://img.youpin.mi-img.com/shopmain/a57241dc6a82565c92f1dc78bbc3a792.png@base@tag=imgScale&h=252&m=1&q=80&w=252"
    >
      <template #title>
        <div class="myCardTitle">
          {{item.name}}
        </div>
      </template>
      <template #desc>
        <van-row
          class="myRowTop"
          style="text-align:center;color:#333333;"
        >
          <van-col span="8"></van-col>
          <van-col span="8"></van-col>
          <van-col span="8">数量</van-col>
        </van-row>
        <van-row
          class="myRowBottom"
          style="text-align:center;color:#888888;"
        >
          <van-col span="8"></van-col>
          <van-col span="8"></van-col>
          <van-col span="8">{{item.tel}}</van-col>

        </van-row>
      </template>
      </van-card> -->
    <!-- <img  class="img" src="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/no_result/no_result_address.png" alt="" >
    <br><div class="word"> 您还没有收货地址，点击下方+新建</div> -->
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";

const router = useRouter();

const goBack = () => {
  router.push("/");
};
// sessionStorage.setItem( 'shoppingCart' ,JSON.stringify([]))
const chosenAddressId = ref("1");
// sessionStorage.setItem( 'address' ,JSON.stringify([1]))
const list = ref(JSON.parse(sessionStorage.getItem("address")));
//  const list = [
//       // {
//       //   id: '1',
//       //   name: '张三',
//       //   tel: '13000000000',
//       //   address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
//       //   isDefault: true,
//       // },
//       // {
//       //   id: '2',
//       //   name: '李四',
//       //   tel: '1310000000',
//       //   address: '浙江省杭州市拱墅区莫干山路 50 号',
//       // },
//       ref(JSON.parse(sessionStorage.getItem("shoppingCart")))
//     ];

    

const onAdd = () => {
  router.push("addaddress");
};

const onEdit = () => {
  router.push("addaddress");
};
</script>
<style lang="less" scoped>
.button {
  margin-top: 250px;
  size: large;
  background-color: white;
  color: brown;
  width: 320px;
  border-color: brown;
}
.img {
  width: 100px;
  height: 100px;
  margin-top: 200px;
}
.word {
  font-size: 10px;
  margin-top: 10px;
}
.list {
  position: absolute;
  top: 50px;
}
</style>
